<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router'
import {
  Menu,
  HomeFilled,
  Tools,
  Avatar,
  Histogram,
  Document,
  SwitchButton,
  Management,
  List, Share
} from '@element-plus/icons-vue'; // 按需引入图标

const router = useRouter()
const loginName = ref(null)

onMounted(() => {
  const loginUser = JSON.parse(localStorage.getItem('loginUser'))
  loginName.value = loginUser?.employeeName || '未获取到用户名'
})

const logout = () => {
  ElMessageBox.confirm(
      '确认退出登录吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    ElMessage.success('退出登录成功')
    localStorage.removeItem('loginUser')
    router.push('/login')
  }).catch(() => {
    ElMessage.info('已取消退出')
  })
}
</script>

<template>
  <div class="common-layout">
    <el-container class="layout-container">
      <!-- Header 区域 -->
      <el-header class="header">
        <div class="header-inner">
          <h1 class="title">LV履程</h1>
          <div class="right-tool">
            <button
                class="logout-btn"
                @click="logout"
            >
              <el-icon><SwitchButton /></el-icon>
              退出登录 【{{ loginName }}】
            </button>
          </div>
        </div>
      </el-header>

      <el-container class="main-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px" class="aside">
          <el-menu
              router
              default-active="1"
              class="menu"
          >
            <!-- 商品管理菜单 -->
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Menu /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/shoes">
                <el-icon><HomeFilled /></el-icon>
                <span>商品管理</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 系统信息管理 -->
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Tools /></el-icon>
                <span>系统信息管理</span>
              </template>
              <el-menu-item index="/employeeList">
                <el-icon><Avatar /></el-icon>
                <span>员工管理</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 订单管理 -->
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Management /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/ordersList">
                <el-icon><List /></el-icon>
                <span>订单状态</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 数据统计管理 -->
            <el-sub-menu index="4">
              <template #title>
                <el-icon><Histogram /></el-icon>
                <span>数据统计管理</span>
              </template>
              <el-menu-item index="/report">
                <el-icon><Share /></el-icon>商品信息统计
              </el-menu-item>
              <el-menu-item index="/log">
                <el-icon><Document /></el-icon>
                <span>日志信息统计</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- 主展示区域 -->
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: linear-gradient(90deg, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);
  padding: 0 20px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.title {
  color: white;
  font-size: 28px;
  font-family: 楷体;
  font-weight: bolder;
  margin: 0;
}

.right-tool {
  display: flex;
  align-items: center;
}

.logout-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: white;
}

.main-container {
  display: flex;
  flex: 1;
}

.aside {
  border-right: 1px solid #e6e6e6;
  background-color: #f8f9fa;
}

.menu {
  border-right: none;
}

.main-content {
  padding: 20px;
  background-color: #fff;
  flex: 1;
  overflow-y: auto;
}
</style>